
// src/components/Console/VNCConsole.tsx
import React, { useEffect, useState, useRef } from 'react';
import { Alert, Spin, Button } from 'antd';
import { consoleApi } from '../../api/console';

interface VNCConsoleProps {
  vmName: string;
  connectionId: string;
}

const VNCConsole: React.FC<VNCConsoleProps> = ({ vmName, connectionId }) => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    loadVNCConsole();
  }, [vmName, connectionId]);

  const loadVNCConsole = async () => {
    try {
      setLoading(true);
      setError(null);
      const info = await consoleApi.getVNCInfo(vmName, connectionId);
      
      // 实际项目中，这里需要集成 noVNC 库
      // import RFB from '@novnc/novnc/core/rfb';
      // const url = consoleApi.buildWebSocketURL(`/console/vnc/${connectionId}/${vmName}`);
      // const rfb = new RFB(canvasRef.current, url);
      
      console.log('VNC Info:', info);
      setError('VNC 集成需要 noVNC 库支持，请参考文档实现');
    } catch (err: any) {
      setError(err.message || '无法连接到 VNC 控制台');
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div style={{ textAlign: 'center', padding: '50px' }}>
        <Spin size="large" tip="连接中..." />
      </div>
    );
  }

  if (error) {
    return (
      <Alert
        message="VNC 连接"
        description={error}
        type="info"
        showIcon
        action={
          <Button size="small" onClick={loadVNCConsole}>
            重试
          </Button>
        }
      />
    );
  }

  return (
    <div
      style={{
        width: '100%',
        height: '600px',
        backgroundColor: '#000',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <canvas ref={canvasRef} style={{ maxWidth: '100%', maxHeight: '100%' }} />
    </div>
  );
};

export default VNCConsole;